<template>
  <div class="relative">
    <button
        @click="$emit('start')"
        :disabled="isRunning"
        class="w-full py-4 px-6 rounded-2xl font-semibold text-lg transition-all duration-300 shadow-lg hover:shadow-xl"
        :class="buttonClasses"
    >
      <div class="flex items-center justify-center gap-3">
        <Play v-if="!isRunning" class="w-6 h-6" />
        <Square v-else class="w-6 h-6" />
        {{ buttonText }}
      </div>
    </button>

    <!-- 进度条 -->
    <div v-if="isRunning" class="mt-4">
      <div class="bg-white/20 rounded-full h-3 overflow-hidden">
        <div
            class="h-full bg-gradient-to-r from-blue-400 to-purple-500 transition-all duration-500 ease-out"
            :style="{ width: `${progress}%` }"
        />
      </div>
      <div class="text-center text-white/80 text-sm mt-2">
        测试进度: {{ progress.toFixed(0) }}%
      </div>
    </div>

    <!-- 错误提示 -->
    <div v-if="errorMessage" class="mt-4 p-3 bg-red-500/20 rounded-lg border border-red-500/30">
      <div class="flex items-center gap-2 text-red-200 text-sm">
        <AlertCircle class="w-4 h-4" />
        {{ errorMessage }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Play, Square, AlertCircle } from 'lucide-vue-next'

interface Props {
  isRunning: boolean
  progress: number
  errorMessage?: string
}

const props = defineProps<Props>()

defineEmits<{
  start: []
}>()

const buttonClasses = computed(() => {
  if (props.errorMessage) {
    return 'bg-red-500 hover:bg-red-600 text-white cursor-not-allowed opacity-80'
  }
  return props.isRunning
      ? 'bg-red-500 hover:bg-red-600 text-white cursor-not-allowed opacity-80'
      : 'bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white hover:scale-105 active:scale-95'
})

const buttonText = computed(() => {
  if (props.errorMessage) return '网络连接失败'
  return props.isRunning ? '测试中...' : '开始测速'
})
</script>